<template>
  <div class="nav_box">
    <router-link :to="{ name: 'zh_home' }"
                 class="logo"
                 v-if="hiddenLogin">
    </router-link>
    <transition name="navlist">
      <div class="nav_list_box"
           v-if="hiddenNavList">
        <img class="nav_logo"
             @click="onNavlink('zh_home')"
             src="@/assets/images/mobile_nav_logo.png"
             alt />
        <div class="nav_list"
             @click="navlist">
          <div class="nav_title home">
            <div class="title"
                 @click="onNavlink('zh_home')"
                 :to="{ name: 'zh_home' }">
              <div>首页</div>
              <!-- <div class="arrows"></div> -->
            </div>
          </div>
          <div class="nav_title">
            <div class="title"
                 @click="onNavlink('zh_aboutUs',{titleText:'协力概览'})"
                 :to="{ name: 'zh_aboutUs' }">
              <img src="@/assets/images/nav_icon_01.png"
                   alt />
              <div>有关协力</div>
              <!-- <div class="arrows"></div> -->
            </div>
            <div class="nav_series_bg"></div>
            <div v-if="hiddenNavList"
                 class="nav_series">
              <div @click="onNavlink('zh_overview',{titleText:'协力概览'})"
                   :to="{ name: 'zh_overview' }"
                   class="nav_item">
                协力概览
              </div>
              <div @click="onNavlink('zh_honor',{titleText:'协力荣誉'})"
                   :to="{ name: 'zh_honor' }"
                   class="nav_item">
                协力荣誉
              </div>
              <div @click="onNavlink('zh_duty',{titleText:'社会责任'})"
                   :to="{ name: 'zh_duty' }"
                   class="nav_item">
                社会责任
              </div>
              <div @click="onNavlink('zh_lectureHall',{titleText:'协力大讲堂'})"
                   :to="{ name: 'zh_lectureHall' }"
                   class="nav_item">
                协力大讲堂
              </div>
            </div>
          </div>
          <div class="nav_title nav_active">
            <div class="title"
                 @click="onNavlink('zh_activity')">
              <img src="@/assets/images/nav_icon_02.png"
                   alt />
              <div>活动专栏</div>
              <!-- <div class="arrows"></div> -->
            </div>
          </div>
          <div class="nav_title">
            <div class="title"
                 @click="onNavlink('zh_field', { cid: serviceCate[0].id })"
                 :to="{ name: 'zh_field', query: { cid: serviceCate[0].id } }">
              <img src="@/assets/images/nav_icon_03.png"
                   alt />
              <div>专业领域</div>
              <!-- <div class="arrows"></div> -->
            </div>
            <div class="nav_series_bg"></div>
            <ul v-if="hiddenNavList"
                class="nav_series">
              <div v-for="(item, index) in serviceCate"
                   :key="index"
                   @click="onNavlink('zh_field', { cid: item.id })"
                   :to="{ name: 'zh_field', query: { cid: item.id } }"
                   class="nav_item_field nav_item">
                {{ item.title }}
              </div>
            </ul>
          </div>
          <div class="nav_title">
            <div class="title"
                 @click="onNavlink('zh_personnel')"
                 :to="{ name: 'zh_personnel' }">
              <img src="@/assets/images/nav_icon_04.png"
                   alt />
              <div>专业人员</div>
              <!-- <div class="arrows"></div> -->
            </div>
          </div>

          <div class="nav_title">
            <div class="title"
                 @click="onNavlink('zh_news')"
                 :to="{ name: 'zh_news' }">
              <img src="@/assets/images/nav_icon_05.png"
                   alt />
              <div>新闻资讯</div>
              <!-- <div class="arrows"></div> -->
            </div>
            <div class="nav_series_bg"></div>
            <ul v-if="hiddenNavList"
                class="nav_series">
              <div v-for="(item, index) in news_cate"
                   :key="index"
                   @click="onNavlink('zh_professional', { cid: item.id })"
                   class="nav_item">
                {{ item.title }}
              </div>

              <!-- <div @click="onNavlink('zh_companyNews',{currentIndex:1})" class="nav_item">协力新闻</div> -->

              <div @click="onNavlink('zh_problem', { cid: '00' })"
                   class="nav_item"
                   :to="{ name: 'zh_problem' }">
                问题解答
              </div>
            </ul>
          </div>
          <div class="nav_title">
            <div class="title"
                 @click="onNavlink('zh_party_mass')"
                 :to="{ name: 'zh_party_mass' }">
              <img src="@/assets/images/nav_icon_06.png"
                   alt />
              <div>党群建设</div>
            </div>
          </div>

          <div class="nav_title">
            <div class="title"
                 @click="onNavlink('zh_recruitment',{titleText:'社会招聘'})"
                 :to="{ name: 'zh_recruitment' }">
              <img src="@/assets/images/nav_icon_07.png"
                   alt />
              <div>人才招聘</div>
            </div>
            <div class="nav_series_bg"></div>
            <ul class="nav_series"
                v-if="hiddenNavList">
              <div @click="onNavlink('zh_social',{titleText:'社会招聘'})"
                   :to="{ name: 'zh_social' }"
                   class="nav_item">
                社会招聘
              </div>
              <div @click="onNavlink('zh_campus',{titleText:'校园招聘'})"
                   :to="{ name: 'zh_campus' }"
                   class="nav_item">
                校园招聘
              </div>
              <div @click="onNavlink('zh_life',{titleText:'协力生活'})"
                   :to="{ name: 'zh_life' }"
                   class="nav_item">
                协力生活
              </div>
            </ul>
          </div>

          <div class="nav_title">
            <div class="title"
                 @click="onNavlink('zh_contactUs')"
                 :to="{ name: 'zh_contactUs' }">
              <img src="@/assets/images/nav_icon_08.png"
                   alt />
              <div>全球网络</div>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <transition name="search">
      <div class="search_box"
           v-if="hiddenSearch">
        <div class="searchDelete"
             @click="onSearch"></div>
        <div :class="[ifSearchFocus ? 'search_line2' : 'search_line1']">
          <div class="selectCate">
            <el-select v-model="searchCateValue"
                       placeholder="请选择"
                       popper-class="searchSelectClass"
                       @change="searchChange">
              <el-option v-for="item in searchOptions"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </div>
          <input type="text"
                 v-model="searchInput"
                 placeholder="请输入搜索内容"
                 @keyup.enter="searchFn"
                 @focus="searchFocus"
                 @blur="searchBlur" />
        </div>
        <div class="search_btn"
             @click="searchFn"></div>
      </div>
    </transition>

    <div class="lang"
         v-if="hiddenLogin">
      <!-- 搜索按钮 -->
      <div class="search_icon"
           v-if="!hiddenSearch"
           @click="onSearch"></div>
      <!-- 语言切换按钮 -->
      <div class="lang_icon"></div>
      <el-cascader v-model="value"
                   :options="options"
                   :props="{ expandTrigger: 'hover' }"
                   @change="handleChange"
                   placeholder="中文"
                   slot="中文"
                   popper-class="lang_select"></el-cascader>
    </div>

    <div class="btns"
         v-if="hiddenLogin">
      <!-- <div class="search"></div> -->
      <div class="search_icon"
           @click="onSearch"></div>
      <div class="btn"
           @click="onNavBtn"></div>
    </div>
  </div>
</template>
<script>
import { service_cate } from '@/api/field.js'
import { news_article_cate } from '@/api/news.js'
export default {
  data() {
    return {
      value: '', //语言类型选择
      options: [
        {
          value: 'CHS',
          label: '中文',
        },
        {
          value: 'EN',
          label: 'EN',
        },
        {
          value: 'JAP',
          label: 'JAP',
        },
      ],
      searchOptions: [
        {
          value: '1',
          label: '专业人员',
        },
        {
          value: '2',
          label: '专业领域',
        },
        {
          value: '3',
          label: '新闻资讯',
        },
      ],

      searchCateValue: '1', // 搜索分类选中值
      serviceCate: [{ id: null }], //专业领域分类
      news_cate: [],

      deviceType: false, // true:PC /  falss:h5
      hiddenSearch: false, // 搜索导航栏是否显示   true：显示 / false:隐藏

      searchInput: '', //搜索内容
      ifSearchFocus: false,
    }
  },
  computed: {
    hiddenLogin: function () {
      if (this.deviceType) {
        return true
      } else {
        if (this.hiddenSearch) {
          return false
        } else {
          return true
        }
      }
    },
    hiddenNavList: function () {
      if (this.deviceType) {
        if (this.hiddenSearch) {
          return false
        } else {
          return true
        }
      } else {
        return false
      }
    },
  },
  watch: {
    '$store.state.headTitle.clientW': {
      deep: true,
      handler: function (newValue, oldValue) {
        // 设置一个定时器 避免多次触发
        clearTimeout(this.Timeout)
        if (newValue < 1200 && newValue > 640) {
          if (oldValue > 1200) {
            this.Timeout = setTimeout(() => {
              this.deviceType = false
            }, 200)
          }
        } else if (newValue < 640) {
          this.Timeout = setTimeout(() => {
            this.deviceType = false
          }, 200)
        } else {
          this.Timeout = setTimeout(() => {
            this.deviceType = true
          }, 200)
        }
      },
    },
  },
  created() {
    if (this.$store.state.headTitle.clientW > 1200) {
      this.Timeout = setTimeout(() => {
        this.deviceType = true
      }, 200)
    } else {
      this.Timeout = setTimeout(() => {
        this.deviceType = false
      }, 200)
    }
    if (!this.$store.state.headTitle.searchCate) {
      this.$store.commit('changeSearchCate', '1')
      this.searchCateValue = '1'
    } else {
      this.searchCateValue = this.$store.state.headTitle.searchCate
    }
  },
  mounted() {
    service_cate().then((res) => {
      this.serviceCate = res.data.data.CHS
      this.$store.commit('changeFieldCate', res.data.data)
    })
    news_article_cate().then((res) => {
      this.news_cate = res.data.data.CHS
      this.$store.commit('changeNewsCate', res.data.data)
    })
  },
  methods: {
    // 搜索框选中值改变
    searchChange(e) {
      this.$store.commit('changeSearchCate', e)
    },
    // 搜索框 获取焦点
    searchFocus() {
      this.$store.commit('changeifSearchFocus', true)
    },
    // 搜索框 失去焦点
    searchBlur() {
      this.$store.commit('changeifSearchFocus', false)
    },
    // 点击搜索  打开搜索输入框
    onSearch() {
      this.hiddenSearch = !this.hiddenSearch
    },
    // 搜索 跳转页面
    searchFn(e) {
      if (this.searchInput) {
        if (this.$route.name != 'zh_search') {
          this.$router.push({ name: 'zh_search' })
        }
        this.$store.commit('changeSearchInput', this.searchInput)
      }
    },
    //语言选择框改变
    handleChange(value) {
      this.$store.commit('changeLang', value[0])

      let name = this.$route.name

      var linkPath
      if (value[0] === 'CHS') {
        // 中文
        linkPath = name.replace(/^(en_)|^(jap_)/g, 'zh_')
      } else if (value[0] === 'EN') {
        // 英文
        linkPath = name.replace(/^(zh_)|^(jap_)/g, 'en_')
      } else if (value[0] === 'JAP') {
        //  日文
        linkPath = name.replace(/^(en_)|^(zh_)/g, 'jap_')
      }
      this.$router.push({ name: linkPath })
    },
    //禁止冒泡事件
    navlist() {
      return false
    },
    onNavBtn() {
      if (this.deviceType) {
        window.document.documentElement.style.overflow = 'auto'
        this.deviceType = false
      } else {
        window.document.documentElement.style.overflow = 'hidden'
        this.deviceType = true
      }
    },
    onNavlink(link, query) {
      window.document.documentElement.style.overflow = 'auto'
      if (this.$store.state.headTitle.equipment == 'pc') {
        this.deviceType = true
        if (link == 'zh_field') {
          this.$store.commit('changeFieldCurrentCHS', query.cid)
        }

        if (link == 'zh_professional') {
            console.log(query.id);
          this.$store.commit('changeNewsCateCurrentCHS', query.cid)
        }
        if (link == 'zh_problem') {
          this.$store.commit('changeNewsCateCurrentCHS', query.id)
        }

        try {
          this.$router.push({ name: link, query: query || {} })
        } catch (error) {
          console.log('已经在当前页面了')
        }

        return false
      } else if (this.$store.state.headTitle.equipment == 'mobile') {
        this.deviceType = false
        try {
          this.$router.push({ name: link, query: query || {} })
        } catch (error) {
          console.log('已经当前页面了')
        }
      }
    },
  },
}
</script>
<style scoped src="./sass/naviber.css"></style>
<style scoped>
/* 动画 进入  */
.navlist-enter-active {
  animation: bounce-in 1s;
}
/* .navlist-leave-active {
  animation: bounce-in 1s  reverse;  
} */
/* 动画 进入 */
@keyframes bounce-in {
  0% {
    opacity: 0;
    /* height: 0; */
    transform: scaleY(0);
  }
  100% {
    opacity: 1;
    /* height: calc(100% - 0.88rem); */
    transform: scaleY(1);
  }
}
</style>
